<template>
  <div class='detail bc-gray'>
    <div class="head bc-white">
      <p>
        <span class="name" v-if="info.status == 1">{{info.category_name}}<span class="color-gray">({{info.title}})</span></span>
        <span class="name" v-else>宿舍考勤</span>
        <span :class="{fr:true,ft12:info.end,ft12_1:!info.end}"><img :src="info.end?stopImg:inImg" alt="">{{info.end?"已结束":"进行中"}}</span>
      </p>
      <p><span>签到时间：{{info.time}}</span></p>
      <p><span>未签到数/总人数：<span class="color-red">{{info.not_signin_num}}</span>/{{info.total_num}}</span></p>
      <p class="rate-box">
        <span>出勤率：{{info.rate||0}}%</span>
        <span>迟到：{{info.late_num}}</span>
        <span>请假：{{info.leave_num}}</span>
        <span>旷到：{{info.not_signin_num}}</span>
      </p>
    </div>
    <div class="tags bc-white" v-if="info.status == 1">
      <span v-for="(item, index) in tagsData" :key="index" :class="{checked:item.checked}" @click="changeTag(item,index)">{{item.label}}</span>
    </div>
    <p v-else class="tags2"><span>待审核列表</span><span class="fr">是否通过审核</span></p>

    <List class="sign-detail" :listData="listData" @forMore="getMoreInfo">
      <p v-show="listData.length>0&&info.status == 1" class="title">未签到学生 <span>点击状态可以修改签到状态</span></p>
      <ul class="detail-list bc-white">
        <li v-for="(item, index) in listData" :key="index">
          <img :src="item.photo||item.wx_pic||defaultImg" alt="">
          <div class="content">
            <p><span>姓名：</span><span>{{item.name}}</span></p>
            <p><span>班级：</span><span>{{item.class}}</span></p>
            <p><span>学号：</span><span>{{item.number}}</span></p>
          </div>
          <div class="operate pr">
            <span v-if="info.status == 1" :class="'pa active '+'color_'+item.state " @click="changeState(item)">{{item.state | formaltState}}</span>
            <span v-else class="swith pa"><van-switch v-model="item.checkded" active-color="#00998d" /></span>
          </div>
        </li>
      </ul>
      <p v-if="info.status == 0&&listData.length>0" class="sure-btn"><van-button type="primary" class="bc-green" @click="sure">确认</van-button></p>
      <p class="no-data" v-show="listData&&listData.length==0">暂时没有数据</p>
    </List>

    <van-dialog v-model="show" title="提示" :showConfirmButton="false">
      <div class="notice-dia">
        <p>本次宿舍考勤还没结束,</p>
        <p>请 <span class="end-time">{{info.lefttime | formaltTime}} </span>后开始审核</p>
      </div>
    </van-dialog>
  </div>
</template>
<script>
import MixIns from '../../../../../mixin/mixin.js'
import List from '../../../../../components/list.vue'
export default {
  components: {List},
  name: "",
  data() {
    return {
      show:false,
      defaultImg:require("../../../../../assets/images/home/default.jpg"),
      stopImg:require("@/assets/images/home/icon-stop.png"),
      inImg:require('@/assets/images/home/icon-clock-y.png'),
      tagsData:[
        {label:"全部",checked:true},
        {label:"签到",checked:false},
        {label:"迟到",checked:false},
        {label:"请假",checked:false},
        {label:"旷到",checked:false}
      ],
      searchInfo:{
        state:0,
        id:""
      },

      settime:null
    };
  },
  filters:{
    formaltState(val){
      return ["","签到","迟到","请假","旷到"][val]
    },
    formaltTime(val){
      var lefttime=val
      var hh = parseInt(lefttime / 3600);
      var mm = parseInt(lefttime / 60 % 60);
      var ss = parseInt(lefttime % 60, 10);
      return hh > 0 ? (hh + '小时' + mm + '分钟') : (mm + '分钟' + ss + '秒')
    }
  },
  methods: {
    changeState(item){
      this.stuInfo=item
      this.$store.state.dias.acheet.columns=["签到","迟到","请假","旷到"]
      this.$store.state.dias.acheet.show=true
      this.$store.state.dias.acheet.confirm=this.sureConfirm
    },
    sureConfirm(val){
      var params={
        id:this.searchInfo.id,
        s_number:this.stuInfo.number,
        state:["签到","迟到","请假","旷到"].indexOf(val)-0+1
      }
      _g.apiPost("Attendance/studentSignin",params).then(res=>{
        _g.toMessage(res)
        this.$store.state.dias.acheet.show=false
        this.getListData()
      })
    },
    changeTag(item,index){
      this.tagsData.forEach(ele=>ele.checked=false)
      this.$set(item,"checked",true)
      this.searchInfo.state=index
      this.listData=[]
      this.getListData()
    },

    getListData() {
      let params = {
        page: this.pageInfo.page,
      }
      params = { ...params, ...this.searchInfo }
      _g.apiPost(this.resquest.list, params).then(res => {
        res.list.forEach(ele=>{ele.checkded=true})
        if (this.pageInfo.page == 1) {
          $('.more-info').slideUp()
          this.$set(this, "listData", res.data || res.list || res) //数组的位置不同
          if(res.total)this.total=res.total
          if(res.info)this.info=res.info
          this.originalData=res

          this.show=res.info.end===false
          clearInterval(this.settime)
          this.settime=setInterval(()=>{
            res.info.lefttime--
            if(res.info.lefttime==0){
              clearInterval(this.settime)
              this.getListData()
            }
          },1000)
          
        } else {
          this.$set(this, "listData", this.listData.concat(res.data || res.list || res)) //数组的位置不同
        }
        if ((res.data || res.list || res).length !=10) {
          this.moreInfo.show = true
        } else {
          this.moreInfo.show = false
        }
      })
    },

    sure(){
      var params={
        id:this.searchInfo.id,
        pass:[],
        nopass:[]
      }
      this.listData.forEach(ele=>{
        if(ele.checkded){
          params.pass.push(ele.id)
        }else{
          params.nopass.push(ele.id)
        }
      })
      params.pass=params.pass.join(",")
      params.nopass=params.nopass.join(",")
      _g.apiPost("attendance/confirmPhoto",params).then(res=>{
        _g.toMessage(res)
        if(res.error==0)this.getListData()
      })
    }
  },

  created() {
    this.searchInfo.id=sessionStorage.getItem("detailId")
  },
  mixins:[MixIns]
};
</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
  .head{
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;

    >p{
      line-height: 50px;
    }
    .name{
      font-size: 16px;
    }

    .rate-box{
      display: flex;
      justify-content: space-between;
      width: 90%;
    }
  }

  .tags{
    margin-top: 20px;
    height: 100px;
    padding: 0 20px;
    box-sizing: border-box;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    display: flex;

    span{
      border: 1px solid #ddd;
      line-height: 55px;
      height: 50px;
      margin-top: 20px;
      margin-right: 20px;
      font-size: 14px;
      padding: 0 20px;
      text-align: center;
      border-radius: 20px;
      color: #999;
    }
    span.checked{
      color: #00998d;
      border-color: #00998d
    }
  }
  .title{
    font-size: 16px;
    height: 80px;
    line-height: 80px;
    padding: 0 20px;
    font-size: 16px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    
    >span{
      font-size: 12px;
      color: #999;
    }
    >span:before{
      content:"*";
      color: red;
    }
  }
  .detail-list{
    max-height: calc(100% - 280px);
    overflow: auto;
    li{
      display: flex;
      padding: 10px 20px;
      box-sizing: border-box;
      border-bottom: 1px solid #ddd;

      img{
        width: 120px;
        height: 120px;
        // border-radius: 50%;
        margin-right: 20px;
      }

      .content{
        font-size: 13px;

        span:nth-of-type(2){
          color: #999
        }
      }
      .operate{
        margin-left: auto;

        >span{
          width: 80px;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          color: red;
        }
        >span:active{
          background-color: transparent;
        }
        .swith{
          top: 60%;
          height: 90px;
          left: -60px;
        }
        .color_1{
          color: green
        }
        .color_2{
          color: #ffab34;
        }
        .color_3{
          color: #5c76fc;
        }
        .color_4{
          color: #ff3d3d;
        }
      }
    }
  }
  .sign-detail{
    height: calc(100% - 340px)!important;
  }

  .color-gray{
    font-size: 14px;
    color: #999;
  }
}

.ft12,.ft12_1{
  font-size: 12px;
  display: flex;
  color: #999;

  img{
    width: 35px;
    height: 35px;
    margin-right: 10px;
    transform: translateY(3px)
  }
}
.ft12_1{
  color: #ffab34
}
.notice-dia{
  text-align: center;
  padding: 20px;
  padding-bottom: 60px;
  p{
    line-height: 60px;
    font-size: 13px;
  }
  .end-time{
    color: #ffab34
  }
}
.tags2{
  padding: 15px 20px;
  font-size: 16px;
}
.sure-btn{
  width: calc(100% - 80px);
  text-align: center;
  margin: 30px auto;
  .bc-green{
    width: 100%;
    
  }
}

</style>